<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="app">
      {{ msg }} <br />{{username}} <br />
      {{pwd}}
      <span v-for="item in items"> {{item.msg}} </span>
      <h3>{{url.url}}</h3>
      <h3>{{items[0].msg}}</h3>
      <h1>{{ user }}</h1>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script>
    const app = new Vue({
      //element 用来给Vue实例定义一个作用范围
      el: "#app",
      data: {
        msg: "百知欢迎你，期待你的加入",
        username: "hello Vue",
        pwd: "12345",
        url: { url: "https://zyjblogs.cn" },
        items: [
          { msg: "13131", age: 23 },
          { msg: "14424", age: 23 },
          { msg: "nini", age: 23 },
        ],
        user: { name: "sss", age: 20 },
      },
    });
  </script>
</html>
